<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择区域原型</title>
    <style>
        /* 全局样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #faf9f5;
            color: #333333;
            line-height: 1.5;
        }

        /* 页面容器 */
        .container {
            max-width: 480px;
            margin: 0 auto;
            background-color: #ffffff;
            min-height: 100vh;
            position: relative;
        }

        /* ==================== 顶部导航栏 ==================== */
        .topNavBar {
            position: sticky;
            top: 0;
            background-color: #ffffff;
            border-bottom: 1px solid #e8e8e8;
            padding: 12px 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            z-index: 100;
        }

        .navLeft {
            width: 40px;
        }

        .backButton {
            font-size: 24px;
            color: #333333;
            border: none;
            background: none;
            cursor: pointer;
            padding: 0;
        }

        .navCenter {
            flex: 1;
            text-align: center;
        }

        .pageTitle {
            font-size: 18px;
            font-weight: 600;
            color: #333333;
        }

        .iconButton {
            font-size: 20px;
            color: #333333;
            border: none;
            background: none;
            cursor: pointer;
            padding: 0;
        }

        /* ==================== 标签栏 ==================== */
        .tabBar {
            display: flex;
            border-bottom: 1px solid #e8e8e8;
            background-color: #ffffff;
            padding: 0 16px;
        }

        .tabItem {
            padding: 12px 20px;
            font-size: 16px;
            color: #666666;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: all 0.3s ease;
            position: relative;
        }

        .tabItem.active {
            color: #333333;
            font-weight: 600;
            border-bottom-color: #d32f2f;
        }

        /* ==================== 城市列表区域 ==================== */
        .cityListContainer {
            position: relative;
            padding-bottom: 20px;
        }

        /* 字母分组 */
        .letterGroup {
            margin-bottom: 0;
        }

        .letterHeader {
            padding: 8px 16px;
            background-color: #f5f5f5;
            font-size: 14px;
            color: #999999;
            font-weight: 500;
            position: sticky;
            top: 89px; /* topNavBar高度 + tabBar高度 */
        }

        .cityList {
            list-style: none;
        }

        .cityItem {
            padding: 14px 16px;
            border-bottom: 1px solid #f0f0f0;
            font-size: 16px;
            color: #333333;
            cursor: pointer;
            transition: background-color 0.2s ease;
        }

        .cityItem:hover {
            background-color: #fafafa;
        }

        .cityItem:active {
            background-color: #f0f0f0;
        }

        /* ==================== 字母导航条 ==================== */
        .letterNav {
            position: fixed;
            right: calc(50% - 240px + 8px); /* 相对于container右侧8px */
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            flex-direction: column;
            gap: 2px;
            z-index: 50;
        }

        /* 小屏幕适配 */
        @media (max-width: 480px) {
            .letterNav {
                right: 8px;
            }
        }

        .letterNavItem {
            font-size: 11px;
            color: #666666;
            padding: 2px 6px;
            cursor: pointer;
            text-align: center;
            transition: all 0.2s ease;
            user-select: none;
        }

        .letterNavItem:hover {
            color: #d32f2f;
            font-weight: 600;
        }

        .letterNavItem.active {
            color: #d32f2f;
            font-weight: 600;
        }

        /* ==================== 字母提示浮层 ==================== */
        .letterTooltip {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80px;
            height: 80px;
            background-color: rgba(0, 0, 0, 0.7);
            border-radius: 8px;
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 200;
        }

        .letterTooltip.show {
            display: flex;
        }

        .tooltipLetter {
            font-size: 48px;
            color: #ffffff;
            font-weight: 600;
        }

        /* ==================== 响应式调整 ==================== */
        @media (max-width: 375px) {
            .pageTitle {
                font-size: 16px;
            }

            .cityItem {
                padding: 12px 16px;
                font-size: 15px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 顶部导航栏 -->
        <div class="topNavBar">
            <div class="navLeft">
                <button class="backButton">‹</button>
            </div>
            <div class="navCenter">
                <div class="pageTitle">选择区域</div>
            </div>
        </div>

        <!-- 标签栏 -->
        <div class="tabBar">
            <div class="tabItem active">城市</div>
        </div>

        <!-- 城市列表 -->
        <div class="cityListContainer">
            <!-- C组 -->
            <div class="letterGroup" id="letter-C">
                <div class="letterHeader">C</div>
                <ul class="cityList">
                    <li class="cityItem">长沙市</li>
                    <li class="cityItem">常德市</li>
                    <li class="cityItem">常州市</li>
                    <li class="cityItem">成都市</li>
                    <li class="cityItem">郴州市</li>
                </ul>
            </div>

            <!-- E组 -->
            <div class="letterGroup" id="letter-E">
                <div class="letterHeader">E</div>
                <ul class="cityList">
                    <li class="cityItem">恩施土家族苗族自治州</li>
                    <li class="cityItem">鄂州市</li>
                </ul>
            </div>

            <!-- H组 -->
            <div class="letterGroup" id="letter-H">
                <div class="letterHeader">H</div>
                <ul class="cityList">
                    <li class="cityItem">杭州市</li>
                    <li class="cityItem">合肥市</li>
                    <li class="cityItem">怀化市</li>
                    <li class="cityItem">黄冈市</li>
                    <li class="cityItem">黄石市</li>
                </ul>
            </div>

            <!-- J组 -->
            <div class="letterGroup" id="letter-J">
                <div class="letterHeader">J</div>
                <ul class="cityList">
                    <li class="cityItem">济南市</li>
                    <li class="cityItem">荆门市</li>
                    <li class="cityItem">荆州市</li>
                </ul>
            </div>

            <!-- L组 -->
            <div class="letterGroup" id="letter-L">
                <div class="letterHeader">L</div>
                <ul class="cityList">
                    <li class="cityItem">娄底市</li>
                </ul>
            </div>

            <!-- N组 -->
            <div class="letterGroup" id="letter-N">
                <div class="letterHeader">N</div>
                <ul class="cityList">
                    <li class="cityItem">南昌市</li>
                    <li class="cityItem">南京市</li>
                    <li class="cityItem">南宁市</li>
                </ul>
            </div>

            <!-- S组 -->
            <div class="letterGroup" id="letter-S">
                <div class="letterHeader">S</div>
                <ul class="cityList">
                    <li class="cityItem">上海市</li>
                    <li class="cityItem">深圳市</li>
                    <li class="cityItem">沈阳市</li>
                    <li class="cityItem">苏州市</li>
                </ul>
            </div>

            <!-- T组 -->
            <div class="letterGroup" id="letter-T">
                <div class="letterHeader">T</div>
                <ul class="cityList">
                    <li class="cityItem">天津市</li>
                </ul>
            </div>

            <!-- W组 -->
            <div class="letterGroup" id="letter-W">
                <div class="letterHeader">W</div>
                <ul class="cityList">
                    <li class="cityItem">武汉市</li>
                </ul>
            </div>

            <!-- X组 -->
            <div class="letterGroup" id="letter-X">
                <div class="letterHeader">X</div>
                <ul class="cityList">
                    <li class="cityItem">西安市</li>
                    <li class="cityItem">咸宁市</li>
                    <li class="cityItem">襄阳市</li>
                </ul>
            </div>

            <!-- Y组 -->
            <div class="letterGroup" id="letter-Y">
                <div class="letterHeader">Y</div>
                <ul class="cityList">
                    <li class="cityItem">宜昌市</li>
                    <li class="cityItem">岳阳市</li>
                </ul>
            </div>

            <!-- Z组 -->
            <div class="letterGroup" id="letter-Z">
                <div class="letterHeader">Z</div>
                <ul class="cityList">
                    <li class="cityItem">郑州市</li>
                    <li class="cityItem">重庆市</li>
                    <li class="cityItem">株洲市</li>
                </ul>
            </div>
        </div>

        <!-- 字母导航条 -->
        <div class="letterNav">
            <div class="letterNavItem" data-letter="C">C</div>
            <div class="letterNavItem" data-letter="E">E</div>
            <div class="letterNavItem" data-letter="H">H</div>
            <div class="letterNavItem" data-letter="J">J</div>
            <div class="letterNavItem" data-letter="L">L</div>
            <div class="letterNavItem" data-letter="N">N</div>
            <div class="letterNavItem" data-letter="S">S</div>
            <div class="letterNavItem" data-letter="T">T</div>
            <div class="letterNavItem" data-letter="W">W</div>
            <div class="letterNavItem" data-letter="X">X</div>
            <div class="letterNavItem" data-letter="Y">Y</div>
            <div class="letterNavItem" data-letter="Z">Z</div>
        </div>

        <!-- 字母提示浮层 -->
        <div class="letterTooltip">
            <div class="tooltipLetter">A</div>
        </div>
    </div>

    <script>
        // 字母导航功能
        const letterNavItems = document.querySelectorAll('.letterNavItem');
        const letterTooltip = document.querySelector('.letterTooltip');
        const tooltipLetter = document.querySelector('.tooltipLetter');

        letterNavItems.forEach(item => {
            item.addEventListener('click', function() {
                const letter = this.dataset.letter;
                const targetGroup = document.getElementById(`letter-${letter}`);

                if (targetGroup) {
                    // 滚动到对应字母组
                    targetGroup.scrollIntoView({ behavior: 'smooth', block: 'start' });

                    // 显示提示浮层
                    tooltipLetter.textContent = letter;
                    letterTooltip.classList.add('show');

                    // 1秒后隐藏提示
                    setTimeout(() => {
                        letterTooltip.classList.remove('show');
                    }, 800);

                    // 更新导航条激活状态
                    letterNavItems.forEach(nav => nav.classList.remove('active'));
                    this.classList.add('active');
                }
            });
        });

        // 城市选择功能
        const cityItems = document.querySelectorAll('.cityItem');

        cityItems.forEach(item => {
            item.addEventListener('click', function() {
                const cityName = this.textContent;
                alert(`已选择: ${cityName}`);
                // 实际应用中这里会执行返回上一页并传递选中城市的操作
            });
        });

        // 返回按钮
        const backButton = document.querySelector('.backButton');
        backButton.addEventListener('click', function() {
            alert('返回上一页');
            // 实际应用中执行返回操作
        });

        // 监听滚动，更新字母导航激活状态
        let scrollTimer;
        window.addEventListener('scroll', function() {
            clearTimeout(scrollTimer);
            scrollTimer = setTimeout(() => {
                const letterGroups = document.querySelectorAll('.letterGroup');
                let currentLetter = '';

                letterGroups.forEach(group => {
                    const rect = group.getBoundingClientRect();
                    // 判断分组是否在视口顶部附近
                    if (rect.top <= 150 && rect.bottom > 150) {
                        currentLetter = group.id.replace('letter-', '');
                    }
                });

                if (currentLetter) {
                    letterNavItems.forEach(nav => {
                        if (nav.dataset.letter === currentLetter) {
                            nav.classList.add('active');
                        } else {
                            nav.classList.remove('active');
                        }
                    });
                }
            }, 100);
        });
    </script>
</body>
</html>
